<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			#box{
				width: 285px;
				height: 438px;
				background-color: #00FFFF;
				padding: 15px 0;
				overflow: hidden;
				position: relative;
			}
			#boxDiv{
				position: absolute;
			}
			#boxA{
				position: absolute;
				bottom: 10px;
			}
			#boxA a{
				display: block;
				width: 13px;
				height: 13px;
				background-color: red;
				float: left;
				margin: 10px;
				position: relative;
				z-index: 3;
			}
			#boxA a:hover{
				background-color: black;
			}
		</style>
		<script type="text/javascript" src="js04.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				var box = document.getElementById("box");
				var boxDIV = document.getElementById("boxDiv");
				var boxImg = document.getElementsByTagName("img");
				var boxA = document.getElementById("boxA");
				var boxAa = document.getElementsByTagName("a");
				boxDIV.style.width = 289 * boxImg.length + "px";
				boxAa[0].style.background = "black";
				// boxDIV.style.background = "red";
				boxA.style.left = (box.offsetWidth - boxA.offsetWidth) / 2 + "px";
				for(var i = 0 ; i < boxAa.length ; i++){
					boxAa[i].unc = i;
					boxAa[i].onclick = function(){
						clearInterval(t);
						inner = this.unc;
						boxDIV.style.left = -289 * inner + "px";
						boxDIV.style.transition = "all 1s";
						a();
						b();
					};
				};
				function a(){
					if(inner >= boxImg.length -1){
						inner = 0;
						boxDIV.style.left = "";
					};
					for(var i = 0; i < boxAa.length ; i ++){
						boxAa[i].style.background = "";
					};
					boxAa[inner].style.background = "black";
				};
				var t;
				function b(){
					t = setInterval(function(){
						inner++;
						// inner %= boxAa.length;
						boxDIV.style.left = -289 * inner + "px";
						a();
					},3000);
				};
			}
		</script>
	</head>
	<body>
		<div id="box">
			<div id="boxA">
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
			</div>
			<div id="boxDiv">
				<img src="img/xiazuang1.jpg">
				<img src="img/xiazuang2.jpg">
				<img src="img/xiazuang3.jpg">
				<img src="img/xiazuang4.jpg">
				<img src="img/xiazuang1.jpg">
			</div>
		</div>
	</body>
</html>